// React-Redux可以帮助我们在react中更加方便的使用redux
import React, {Component} from 'react'
import {connect} from 'react-redux';


class TodoListReactRedux extends Component{

    // constructor(props) {
        // super(props);
        // this.state = store.getState();
    // }

    render() {
        const {inputValue,changInputValue,handleClick,handleDelete} = this.props;
        return (
            <>
                <div>
                    <input value={inputValue}
                    onChange={changInputValue}/>
                    <button onClick={handleClick}>提交</button>
                </div>
                <ul>
                    {
                        this.props.list.map((item,index) => {
                        return <li 
                        onClick={handleDelete}
                        key={index}>{item}</li>
                        })
                    }
                </ul>
            </>
        )
    }
}

// 设置连接映射规则变为props
const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list,
    }
}
// 设置store.dispatch挂载到props上
const mapDispatchToProps = (dispatch) => {
    return {
        changInputValue(e){
            // console.log(e)/
            const action = {
                type: 'change_input_value',
                value: e.target.value
            }
            dispatch(action)
        },
        handleClick() {
            // console.log('1111')
            const action = {
                type: 'add_item'
            }
            dispatch(action)
        },
        handleDelete() {

        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(TodoListReactRedux);// 连接store